import React, { useState, useEffect} from 'react'
import axios from 'axios'

export default function BestFetchData () {
    const [data, setData] = useState(0)
    useEffect(() => {
        const fetchData = async ()=>{
            const ret = await axios('http://wthrcdn.etouch.cn/weather_mini?city=青岛')
            setData(ret.data.data)
        }
        fetchData()
    }, [])
    return (
        <div>
            <h2>获取数据基本流程</h2>
            <p><strong>城市：</strong>{data.city}</p>
            <p><strong>当前温度：</strong>{data.wendu}℃</p>
            <p><strong>感冒预警：</strong>{data.ganmao}</p>
            <h4>未来{data.forecast?.length}天天气情况</h4>
            <ul>
                {data.forecast?.length
                ? data.forecast.map(item=><li key={item.date}>{`${item.date} - ${item.type} - ${item.low}~${item.high}`}</li>)
                :null}
            </ul>
        </div>
    )
}
